import React, { Component } from "react";
import { Select, Input, DatePicker, Button, Tabs, Pagination } from "antd";
import moment, { isMoment } from "moment";
import "moment/locale/zh-cn";
import "./index.less";
import GoodsList from "./../../components/goods-list";
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
moment.locale("zh-cn");

function handleChange(value) {
  console.log(`selected ${value}`);
}

function onChange(dates, dateStrings) {
  console.log("From: ", dates[0], ", to: ", dates[1]);
  console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
}
function callback(key) {
  console.log(key);
}
export default class OrderQuery extends Component {
  render() {
    return (
      <div className="order-query">
        {/* 信息筛选 */}
        <div className="query-search">
          {/* 订单搜索 */}
          <div className="content">
            <span className="title">订单搜索：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 120 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
            <Input className="search-input" />
          </div>
          {/* 下单时间 */}
          <div className="order-time">
            <span className="title">下单时间：</span>
            <RangePicker
              ranges={{
                昨天: [moment(), moment()],
                今天: [moment().startOf("date"), moment()],
                近7天: [moment().startOf("week"), moment().endOf("week")],
                近30天: [moment().startOf("month"), moment().endOf("month")]
              }}
              //   defaultPickerValue=[moment()]
              showTime
              format="YYYY/MM/DD HH:mm:ss"
              onChange={onChange}
            />
          </div>
          {/* 商品名称： */}
          <div className="goods">
            <div>
              <span className="title">商品名称：</span>
              <Input className="goods-input" />
            </div>
            <div className="goods-content">
              <span className="title">订单类型：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className="goods-content">
              <span className="title">维权状态：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
          </div>
          {/* 订单状态 */}
          <div className="order-status">
            <div>
              <span className="title">订单状态：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className="status-content">
              <span className="title">配送方式：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className="status-content">
              <span className="title">付款方式：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
          </div>
          {/* 清空筛选条件 */}
          <div className="filter">
            <Button type="primary" className="select">
              筛选
            </Button>
            <Button className="export-report">导出报表</Button>
            清空筛选条件
          </div>
        </div>
        {/* 订单列表 */}
        <div className="order-list">
          <div>
            <Tabs onChange={callback} type="card">
              <TabPane tab="全部" key="1aa">
                <GoodsList />
              </TabPane>
              <TabPane tab="待付款" key="2bb">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="待发货" key="3cc">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="已发货" key="4dd">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="已完成" key="5">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="已关闭" key="6">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="退款中" key="7">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
          </div>
        </div>
        {/* 列表分页 */}
        <div style={{ margin: 20 }}>
          <Pagination defaultCurrent={6} total={500} />
        </div>
      </div>
    );
  }
}
